<template>
  <el-container>
    <el-row><common-head :child-name="childName"></common-head></el-row>

    <el-main>

      <el-card class="box-card" shadow="hover" body-style="width: 250px">
        <div class="text item">
          <el-form v-model="showCategory" class="demo-form-inline" style="text-align: left">
            <el-form-item style="font-size: medium; font-weight: bold" label="品类名称：">
              <el-select :disabled="true" v-model="showCategory.categoryName" size="small" placeholder="全部">
              </el-select>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="品类顺序：">
              <el-input-number :disabled="true" v-model="showCategory.categoryOrder" size="small"
                               controls-position="right" :min="1" :max="10"></el-input-number>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="子品类：">
              <el-input :disabled="true" v-model="showCategory.subcategory" placeholder="子品类"></el-input>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="品类描述：">
              <el-input :disabled="true" v-model="showCategory.categoryDescription"
                        size="medium" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" plain:true @click="back">返回</el-button>
            </el-form-item>

          </el-form>
        </div>
      </el-card>

    </el-main>
  </el-container>
</template>

<script>
  import commonHead from "../../system/common/commonHead";

  export default {
        name: "showCategory",
        components: {commonHead},
        data(){
          return {
            childName: '查看品类',

            showCategory: {
              categoryId: '',
              categoryName: '',
              categoryOrder: '',
              subcategory: '',
              categoryDescription: ''
            }
          }
        },

        mounted(){
          this.created();
        },

        methods: {

          //展示当前的品类详情
          created(){
            this.axios.get("micro-mall-server/category/getCategoryById/" + this.$route.query.categoryId).then(res => {
              this.showCategory = res.data.data;
            });
          },

          //返回
          back(){
            this.$router.push({
              path: 'category_management'
            })
          }
        }
    }
</script>

<style scoped>
  .box-card{
    position: absolute;
    top: 40%;
  }
</style>
